<template>
  <div class="layout">
    <el-row>
      <el-col :span="4">
        <div class="logo"></div>
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-menu-item index="3">
            <i class="el-icon-document"></i>
            <span slot="title">用户管理</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-setting"></i>
            <span slot="title">系统设置</span>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="20">
        <div class="head"></div>
        <div class="main"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { someArray } from "@/types/index";

@Component
export default class layout extends Vue {
  handleOpen(key: number, keyPath: someArray) {
    console.log(key, keyPath);
  }

  handleClose(key: number, keyPath: someArray) {
    console.log(key, keyPath);
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/variables.scss";
.layout,
.el-row,
.el-col,
.el-menu {
  height: 100%;
}

.head,
.logo {
  background-color: $bg;
  height: 80px;
}

.main {
  height: calc(100% - 80px);
  border: 1px solid black;
}
</style>